<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" >
			<block slot="backText">返回</block>
			<block slot="content">数据审核</block>
			<block slot="right">
				<view style="color: #fff;margin-right: 20rpx;" @click="shenhe">审核</view>
			</block>
		</cu-custom>
		<scroll-view scroll-y class="page">
			<view style="height: 10rpx;"></view>
			<view class="cu-list menu card-menu margin-bottom-xl shadow-lg radius " style="background-color: #fff;">
				<view class="u-header"><text class="tips">样品编号:</text><text class="val">{{data.sampleCode}}</text></view>
				<view class="u-body">
					<view class="row">
						<view class="tips">开始时间</view>
						<view class="val">{{data.beginTime}}</view>
					</view>
					<view class="row">
						<view class="tips">结束时间</view>
						<view class="val">{{data.endTime}}</view>
					</view>
				</view>
			</view>
			<view class="cu-list menu card-menu margin-bottom-xl shadow-lg radius " style="background-color: #fff;">
				<view class="u-header"><text class="tips">数据结果:</text></view>
				<view class="advance-area">
					<view class="flex-box table tc">
						<view class="item-3">
							水分
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">Mt(%)</view>
								<view class="item">Mad(%)</view>
							</view>
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">{{data.resultData.Mt}}</view>
								<view class="item">{{data.resultData.Mad}}</view>
							</view>
						</view>
					</view>
					<view class="flex-box table tc">
						<view class="item-3">
							粘结指数
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">G</view>
							</view>
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">{{data.resultData.G}}</view>
							</view>
						</view>
					</view>
					<view class="flex-box table tc">
						<view class="item-3">
							灰分
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">Aad(%)</view>
								<view class="item">Ad(%)</view>
							</view>
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">{{data.resultData.Aad}}</view>
								<view class="item">{{data.resultData.Ad}}</view>
							</view>
						</view>
					</view>
					<view class="flex-box table tc">
						<view class="item-3">
							挥发分
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">Vad(%)</view>
								<view class="item">Vd(%)</view>
								<view class="item">Vdaf(%)</view>
							</view>
						</view>
						<view class="item-3">
							<view class="table-flex">
							    <view class="item">{{data.resultData.Vad}}</view>
								<view class="item">{{data.resultData.Vd}}</view>
								<view class="item">{{data.resultData.Vdaf}}</view>
							</view>
						</view>
					</view>
					<view class="flex-box table tc">
						<view class="item-3">
							硫
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">St,ad(%)</view>
								<view class="item">St,d(%)</view>
							</view>
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">{{data.resultData.Stad}}</view>
								<view class="item">{{data.resultData.Std}}</view>
							</view>
						</view>
					</view>
					<view class="flex-box table tc">
						<view class="item-3">
							氢
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">Had(%)</view>
								<view class="item">Hd(%)</view>
								<view class="item">Hdaf(%)</view>
							</view>
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">{{data.resultData.Had}}</view>
								<view class="item">{{data.resultData.Hd}}</view>
								<view class="item">{{data.resultData.Hdaf}}</view>
							</view>
						</view>
					</view>
					<view class="flex-box table tc">
						<view class="item-3">
							发热量
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">Qb,ad(J/g)</view>
								<view class="item">Qgr,ad(J/g)</view>
								<view class="item">Qgr,d(J/g)</view>
								<view class="item">Qgr,d(cal/g)</view>
								<view class="item">Qnet,ar(J/g)</view>
								<view class="item">Qnet,ar(cal/g)</view>
							</view>
						</view>
						<view class="item-3">
							<view class="table-flex">
								<view class="item">{{data.resultData.Qbad}}</view>
								<view class="item">{{data.resultData.Qgrad}}</view>
								<view class="item">{{data.resultData.Qgrd}}</view>
								<view class="item">{{data.resultData.Qgrd2}}</view>
								<view class="item">{{data.resultData.Qnetar}}</view>
								<view class="item">{{data.resultData.Qnetar2}}</view>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 10rpt;height: 20rpx;"></view>
			</view>
		</scroll-view>
		<view class="cu-modal bottom-modal" :class="modalName=='confirm'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="pass(0)">驳回</view>
					<view class="action text-green" @tap="pass(1)">通过</view>
				</view>
				<view class="grid col-3 padding-sm">
					<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
						<button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
						 :data-value="item.itemCode"> {{item.itemCode}}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				data: {},
				checkbox:[],
				param:{
					sampleId:'',
					sampleResultId:'',
					version:'',
					todoId:'',
					itemList:[],
					status:402  //403
				}
			}
		},
		components: {},
		onShow() {
			this.data = uni.getStorageSync("AUDIT_DATA");
			this.param.sampleId = this.data.sampleId;
			this.param.sampleResultId = this.data.sampleResultId;
			this.param.version = this.data.version;
			this.param.todoId = this.data.todoId;
			var tmp = JSON.parse(this.data.assayItem);
			for(var i =0;i<tmp.length;i++){
				this.checkbox.push(
					{
						itemCode:tmp[i].itemCode,
						checked:false
					}
				);
			}
		},
		methods: {
			shenhe:function(){
				this.modalName = "confirm";
			},
			hideModal:function(){
				this.modalName = null;
			},
			pass:function(f){
				if(f==1){
					this.param.status = 402;
					uni.request({
						url: this.$http + '/biz/bizSampleResult/pass',
						data: this.param,
						header: {
							token: uni.getStorageSync("token")
						},
						method: 'POST',
						success: (res) => {
							if (res.statusCode == 200 && res.data.code == 0) {
								this.modalName = null;
								uni.showToast({
									icon: 'none',
									title: '操作成功！'
								});
								uni.navigateBack();
							} else {
								uni.showToast({
									icon: 'none',
									title: '操作失败，请重试！'
								});
							}
						},
						fail: function() {
							uni.showToast({
								icon: 'none',
								title: '服务器请求超时！'
							});
						}
					})
				}else{
					this.param.status = 403;
					this.param.itemList = [];
					for (let i = 0;i < this.checkbox.length; i++) {
						if (this.checkbox[i].checked) {
							this.param.itemList.push(this.checkbox[i].itemCode);
						}
					}
					
					uni.request({
						url: this.$http + '/biz/bizSampleResult/refuse',
						data: this.param,
						header: {
							token: uni.getStorageSync("token")
						},
						method: 'POST',
						success: (res) => {
							if (res.statusCode == 200 && res.data.code == 0) {
								this.modalName = null;
								uni.showToast({
									icon: 'none',
									title: '操作成功！'
								});
								uni.navigateBack();
							} else {
								uni.showToast({
									icon: 'none',
									title: '操作失败，请重试！'
								});
							}
						},
						fail: function() {
							uni.showToast({
								icon: 'none',
								title: '服务器请求超时！'
							});
						}
					})
				}
			},
			ChooseCheckbox(e) {
				let items = this.checkbox;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].itemCode == values) {
						items[i].checked = !items[i].checked;
						break
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	// 多行合并表格
	$color:#e0e0e0;

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.flex-box {
		display: flex;
		flex-wrap: wrap;
	}


	.flex-box>.item-2 {
		flex: 0 0 50%;
	}

	.flex-box>.item-3 {
		flex: 0 0 33.3333%;
	}

	.title {
		margin: 20rpx 0;
		color: red;
	}

	.advance-area {
		.item-3 {
			font-size: 26rpx;
			border: 1rpx solid $color;
			border-width: 1rpx 1rpx 0 0;
			box-sizing: border-box;
			text-align: center;

			&:first-child {
				border-left-width: 1rpx;
			}

			&:last-child {
				border-right-width: 1rpx;
			}
		}

		.thead {
			.item-3 {
				font-weight: bold;
				padding: 16rpx 0;
				box-sizing: border-box;
			}
		}

		.table {
			&:last-child {
				border-bottom: 1rpx solid $color;
			}

			.item-3 {
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}
		}

		.table-flex {
			flex: 1;

			.item {
				border-bottom: 1rpx solid $color;
				padding: 10rpx 0;
				box-sizing: border-box;

				&:last-child {
					border-width: 0;
				}
			}
		}
	}
	
	button .cu-tag {
		position: absolute;
		top: 8upx;
		right: 8upx;
	}
	
</style>
